<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Demo upload file</title>
        <script src="http://code.jquery.com/jquery-latest.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                var canvas = document.getElementById("panel");
                var ctx = canvas.getContext('2d');
                var img = new Image();
                var theSelection;
                
                // define Selection constructor
                function Selection(x, y, w, h){
                    this.x = x; // initial positions
                    this.y = y;
                    this.w = w; // and size
                    this.h = h;
                    
                    this.px = x; // extra variables to dragging calculations
                    this.py = y;
                    
                    this.csize = 6; // resize cubes size
                    this.csizeh = 10; // resize cubes size (on hover)
                    this.bHow = [false, false, false, false]; // hover statuses
                    this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes
                    this.bDrag = [false, false, false, false]; // drag statuses
                    this.bDragAll = false; // drag whole selection    
                }
                
                // define Selection draw method
                Selection.prototype.draw = function(){
                    ctx.strokeStyle = '#000';
                    ctx.lineWidth = 2;
                    ctx.strokeRect(this.x, this.y, this.w, this.h);
                    
                    // draw part of original image
                    if (this.w > 0 && this.h > 0) {
                        ctx.drawImage(img, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
                    }
                    
                    // draw resize cubes
                    ctx.fillStyle = '#fff';
                    ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);
                    ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);
                    ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2);
                    ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);
                }
                
                
                // create initial selection
                theSelection = new Selection(30, 30, 150, 150);
                
                $('#panel').mousemove(function(e){ // binding mouse move event
                    var canvasOffset = $(canvas).offset();
                    iMouseX = Math.floor(e.pageX - canvasOffset.left);
                    iMouseY = Math.floor(e.pageY - canvasOffset.top);
                    
                    // in case of drag of whole selector
                    if (theSelection.bDragAll) {
                        theSelection.x = iMouseX - theSelection.px;
                        theSelection.y = iMouseY - theSelection.py;
                    }
                    
                    for (i = 0; i < 4; i++) {
                        theSelection.bHow[i] = false;
                        theSelection.iCSize[i] = theSelection.csize;
                    }
                    
                    // hovering over resize cubes
                    if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh &&
                    iMouseY > theSelection.y - theSelection.csizeh &&
                    iMouseY < theSelection.y + theSelection.csizeh) {
                    
                        theSelection.bHow[0] = true;
                        theSelection.iCSize[0] = theSelection.csizeh;
                    }
                    if (iMouseX > theSelection.x + theSelection.w - theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh &&
                    iMouseY > theSelection.y - theSelection.csizeh &&
                    iMouseY < theSelection.y + theSelection.csizeh) {
                    
                        theSelection.bHow[1] = true;
                        theSelection.iCSize[1] = theSelection.csizeh;
                    }
                    if (iMouseX > theSelection.x + theSelection.w - theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh &&
                    iMouseY > theSelection.y + theSelection.h - theSelection.csizeh &&
                    iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) {
                    
                        theSelection.bHow[2] = true;
                        theSelection.iCSize[2] = theSelection.csizeh;
                    }
                    if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh &&
                    iMouseY > theSelection.y + theSelection.h - theSelection.csizeh &&
                    iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) {
                    
                        theSelection.bHow[3] = true;
                        theSelection.iCSize[3] = theSelection.csizeh;
                    }
                    
                    // in case of dragging of resize cubes
                    var iFW, iFH;
                    if (theSelection.bDrag[0]) {
                        var iFX = iMouseX - theSelection.px;
                        var iFY = iMouseY - theSelection.py;
                        iFW = theSelection.w + theSelection.x - iFX;
                        iFH = theSelection.h + theSelection.y - iFY;
                    }
                    if (theSelection.bDrag[1]) {
                        var iFX = theSelection.x;
                        var iFY = iMouseY - theSelection.py;
                        iFW = iMouseX - theSelection.px - iFX;
                        iFH = theSelection.h + theSelection.y - iFY;
                    }
                    if (theSelection.bDrag[2]) {
                        var iFX = theSelection.x;
                        var iFY = theSelection.y;
                        iFW = iMouseX - theSelection.px - iFX;
                        iFH = iMouseY - theSelection.py - iFY;
                    }
                    if (theSelection.bDrag[3]) {
                        var iFX = iMouseX - theSelection.px;
                        var iFY = theSelection.y;
                        iFW = theSelection.w + theSelection.x - iFX;
                        iFH = iMouseY - theSelection.py - iFY;
                    }
                    
                    if (iFW > theSelection.csizeh * 2 && iFH > theSelection.csizeh * 2) {
                        theSelection.w = iFW;
                        theSelection.h = iFH;
                        
                        theSelection.x = iFX;
                        theSelection.y = iFY;
                    }
                    
                    //drawScene();
                });
                
                $('#panel').mousedown(function(e){ // binding mousedown event
                    var canvasOffset = $(canvas).offset();
                    iMouseX = Math.floor(e.pageX - canvasOffset.left);
                    iMouseY = Math.floor(e.pageY - canvasOffset.top);
                    
                    theSelection.px = iMouseX - theSelection.x;
                    theSelection.py = iMouseY - theSelection.y;
                    
                    if (theSelection.bHow[0]) {
                        theSelection.px = iMouseX - theSelection.x;
                        theSelection.py = iMouseY - theSelection.y;
                    }
                    if (theSelection.bHow[1]) {
                        theSelection.px = iMouseX - theSelection.x - theSelection.w;
                        theSelection.py = iMouseY - theSelection.y;
                    }
                    if (theSelection.bHow[2]) {
                        theSelection.px = iMouseX - theSelection.x - theSelection.w;
                        theSelection.py = iMouseY - theSelection.y - theSelection.h;
                    }
                    if (theSelection.bHow[3]) {
                        theSelection.px = iMouseX - theSelection.x;
                        theSelection.py = iMouseY - theSelection.y - theSelection.h;
                    }
                    
                    
                    if (iMouseX > theSelection.x + theSelection.csizeh && iMouseX < theSelection.x + theSelection.w - theSelection.csizeh &&
                    iMouseY > theSelection.y + theSelection.csizeh &&
                    iMouseY < theSelection.y + theSelection.h - theSelection.csizeh) {
                    
                        theSelection.bDragAll = true;
                    }
                    
                    for (i = 0; i < 4; i++) {
                        if (theSelection.bHow[i]) {
                            theSelection.bDrag[i] = true;
                        }
                    }
                });
                
                $('#panel').mouseup(function(e){ // binding mouseup event
                    theSelection.bDragAll = false;
                    
                    for (i = 0; i < 4; i++) {
                        theSelection.bDrag[i] = false;
                    }
                    theSelection.px = 0;
                    theSelection.py = 0;
                });
                
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas
                img.onload = function(){
                };
                img.src = "uploads/Penguins.jpg";
                ctx.drawImage(img, 0, 0, 400, 400);
                // and make it darker
                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                // draw selection
                theSelection.draw();
            });
        </script>
    </head>
    <body>
        <h1>Add new clip</h1>
        <canvas id='panel' width="400" height="400">
        </canvas>
        <form action="#" enctype="multipart/form-data">
            <input type="file" id="file">
            <button id="upload">
                upload
            </button>
        </form>
    </body>
</html>
